<template>
  <div class="client">
    <el-row style="height: 100%">
      <el-col :span="12" style="height: 100%">
        <pageCard :title-name="'公司信息'" :type="'pageTitle'">
          <div>
            <div class="topText">公司名称：</div>
            <el-input
              v-model="searchCompany.companyName"
              placeholder="请输入搜索内容"
              class="searchInput"
              @keyup.enter.native="searchCompanyClick"
            />
            <el-button type="primary" class="topBtn" icon="el-icon-search" @click="searchCompanyClick">
              搜索
            </el-button>
            <div class="topBtnDiv">
              <el-button
                v-permission="['system:company:add']"
                type="primary"
                plain
                class="topBtn"
                @click="companyAddClick()"
              >
                新增
              </el-button>
              <el-button
                v-permission="['system:company:edit']"
                type="primary"
                plain
                class="topBtn"
                :disabled="JSON.stringify(rowData.companyData) === '{}'"
                @click="companyEditClick()"
              >
                修改
              </el-button>
              <el-button
                v-permission="['system:company:del']"
                type="danger"
                plain
                class="topBtn"
                :disabled="JSON.stringify(rowData.companyData) === '{}'"
                @click="companyDeleteClick()"
              >
                删除
              </el-button>
            </div>
          </div>
          <myTable
            ref="companyTable"
            style="height: 97%"
            :row-key="'companyId'"
            :table-label="companyTableLabel"
            :table-data="companyTableData"
            :table-total-size="companyTableTotalSize"
            :search-data="searchCompanyData"
            @getTableData="getCompanyTableData"
            @rowClickChange="rowCompanyClickChange"
          />
          <pagination
            :table-total-size="companyTableTotalSize"
            :search-data="searchCompanyData"
            @getTableData="$refs.companyTable.getTableData()"
          />
        </pageCard>
      </el-col>
      <el-col :span="12" style="height: 100%">
        <pageCard :title-name="'联系人信息'" :type="'pageTitle'">
          <div>
            <div class="topText">姓名：</div>
            <el-input
              v-model="searchPerson.personName"
              placeholder="请输入搜索内容"
              class="searchInput"
              @keyup.enter.native="searchPersonClick"
            />
            <el-button type="primary" class="topBtn" icon="el-icon-search" @click="searchPersonClick">
              搜索
            </el-button>
            <div class="topBtnDiv">
              <el-button
                v-permission="['system:company:addPerson']"
                type="primary"
                plain
                class="topBtn"
                @click="personAddClick()"
              >
                新增
              </el-button>
              <el-button
                v-permission="['system:company:editPerson']"
                type="primary"
                plain
                class="topBtn"
                :disabled="JSON.stringify(rowData.personData) === '{}'"
                @click="personEditClick()"
              >
                修改
              </el-button>
              <el-button
                v-permission="['system:company:delPerson']"
                type="danger"
                plain
                class="topBtn"
                :disabled="JSON.stringify(rowData.personData) === '{}'"
                @click="personDeleteClick()"
              >
                删除
              </el-button>
            </div>
          </div>
          <myTable
            ref="personTable"
            style="height: 90%"
            :row-key="'personId'"
            :table-label="personTableLabel"
            :table-data="personTableData"
            :table-total-size="personTableTotalSize"
            :search-data="searchPersonData"
            @getTableData="getPersonTableData"
            @rowClickChange="rowPersonClickChange"
          />
          <pagination
            :table-total-size="personTableTotalSize"
            :search-data="searchPersonData"
            @getTableData="$refs.personTable.getTableData()"
          />
        </pageCard>
      </el-col>
    </el-row>
    <clientCompanyChoose
      v-if="companyChosseIndex"
      ref="clientCompanyChoose"
      @companySubmit="companySubmit"
      @closeCompanyDialog="closeCompanyDialog"
    />
    <clientPersonChoose
      v-if="personChosseIndex"
      ref="clientPersonChoose"
      @personSubmit="personSubmit"
      @closePersonDialog="closePersonDialog"
    />
  </div>
</template>

<script>
import pageCard from '@/components/page/pageCard'
import myTable from '@/components/Table/index'
import pagination from '@/components/Table/pagination'
import { getClientCompany, getClientPerson } from '@/api/table'
import {
  addClientCompany,
  editClientCompany,
  deleteClientCompany,
  addClientPerson,
  editClientPerson,
  deleteClientPerson
} from '@/api/system-management'
import clientCompanyChoose from './components/clientCompanyChoose'
import clientPersonChoose from './components/clientPersonChoose'
export default {
  name: 'Client',
  components: {
    pageCard,
    myTable,
    pagination,
    clientCompanyChoose,
    clientPersonChoose
  },
  data() {
    return {
      companyChosseIndex: false,
      personChosseIndex: false,
      searchCompany: {
        companyName: ''
      },
      searchPerson: {
        personName: ''
      },
      // companyTable需要的数据
      companyIs: false,
      companyTableData: [],
      companyTableLabel: [
        {
          type: 'expand'
        },
        // {
        //   type: 'selection',
        //   width: '55'
        // },
        {
          prop: 'companyName',
          label: '公司名称',
          width: 250,
          showOverflowTooltip: false
        },
        {
          prop: 'province',
          labelDisplay: true,
          label: '省份',
          width: 80,
          showOverflowTooltip: false
        },
        {
          prop: 'city',
          labelDisplay: true,
          width: 120,
          label: '城市',
          showOverflowTooltip: false
        },
        {
          prop: 'country',
          labelDisplay: true,
          label: '区县',
          width: 120,
          showOverflowTooltip: false
        },
        {
          prop: 'fullAddress',
          label: '地址',
          showOverflowTooltip: true
        },
        {
          prop: 'webUrl',
          labelDisplay: false,
          label: '公司网站',
          width: 110,
          showOverflowTooltip: false
        },
        {
          prop: 'post',
          labelDisplay: false,
          label: '邮政编码',
          width: 110,
          showOverflowTooltip: false
        },
        {
          prop: 'introduce',
          labelDisplay: false,
          label: '公司简介',
          width: 110,
          showOverflowTooltip: false
        }
      ],
      companyTableTotalSize: null,
      searchCompanyData: {
        pageSize: 10,
        currentPage: 1,
        sort: {},
        params: {}
      },
      // personTable需要的数据
      personTableData: [],
      personTableLabel: [
        {
          type: 'expand'
        },
        // {
        //   type: 'selection',
        //   width: '55'
        // },
        {
          prop: 'personName',
          label: '联系人名称',
          width: 110,
          showOverflowTooltip: false
        },
        {
          prop: 'sex',
          label: '性别',
          width: 120,
          showOverflowTooltip: false
        },
        {
          prop: 'mobileTel',
          label: '移动电话',
          showOverflowTooltip: false
        },
        {
          prop: 'email',
          label: '邮箱',
          width: 200,
          showOverflowTooltip: true
        },
        {
          prop: 'telephone',
          label: '固定电话',
          labelDisplay: false,
          width: 200,
          showOverflowTooltip: false
        },
        {
          prop: 'userNote',
          labelDisplay: false,
          label: '备注',
          width: 110,
          showOverflowTooltip: true
        }
      ],
      personTableTotalSize: null,
      searchPersonData: {
        pageSize: 10,
        currentPage: 1,
        sort: {},
        params: {}
      },
      rowData: {
        companyData: {},
        personData: {}
      }
    }
  },
  methods: {
    // 初始化已选中行
    initClickRow() {
      this.rowData.companyData = this.companyTableData[0]
      this.$refs.personTable.getTableData()
    },
    // 点击公司增加
    companyAddClick() {
      this.companyChosseIndex = true
      this.$nextTick(() => {
        this.$refs.clientCompanyChoose.is('add')
      })
    },
    // 点击公司编辑
    companyEditClick() {
      this.companyChosseIndex = true
      this.$nextTick(() => {
        this.$refs.clientCompanyChoose.is('edit', this.rowData.companyData)
      })
    },
    // 关闭公司弹窗
    closeCompanyDialog() {
      this.companyChosseIndex = false
    },
    // 删除公司
    companyDeleteClick() {
      this.$confirm('此操作将永久删除该客户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteClientCompany({ companyId: this.rowData.companyData.companyId }).then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.$refs.companyTable.getTableData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 提交公司
    companySubmit(data, type) {
      if (type === 'add') {
        addClientCompany(data).then((res) => {
          this.$notify({
            title: '成功',
            message: '增加客户成功',
            type: 'success'
          })
          this.$refs.companyTable.getTableData()
        })
      } else {
        editClientCompany(data).then((res) => {
          this.$notify({
            title: '成功',
            message: '修改成功',
            type: 'success'
          })
          this.$refs.companyTable.getTableData()
        })
      }
    },
    // 点击公司行回调函数
    async rowCompanyClickChange(val) {
      this.rowData.companyData = val
      this.$refs.personTable.getTableData()
    },
    // 重新获取当前选中行的数据,公司
    resetCompanyCurrentRow(id) {
      for (const item of this.companyTableData) {
        if (id === item.companyId) {
          this.rowData.companyData = item
        }
      }
    },
    // 获取公司表格数据
    getCompanyTableData(cab) {
      getClientCompany(this.searchCompanyData).then((res) => {
        this.companyTableData = res.data
        this.companyTableTotalSize = res.total_count
        if (res.total_count === 0) {
          this.rowData.companyData = {}
        } else {
          this.resetCompanyCurrentRow(this.rowData.companyData.companyId)
        }
        cab(res.data)
        // this.initClickRow()
      })
    },
    // 重新获取当前选中行的数据,联系人
    resetPersonCurrentRow(id) {
      for (const item of this.personTableData) {
        if (id === item.personId) {
          this.rowData.personData = item
        }
      }
    },
    // 获取公司联系人表格数据
    getPersonTableData(cab) {
      this.searchPersonData.params['companyId'] = this.rowData.companyData.companyId
      getClientPerson(this.searchPersonData).then((res) => {
        this.personTableData = res.data
        this.personTableTotalSize = res.total_count
        if (res.total_count === 0) {
          this.rowData.personData = {}
        } else {
          this.resetPersonCurrentRow(this.rowData.companyData.personId)
        }
        cab(res.data)
      })
    },
    // 点击联系人增加
    personAddClick() {
      this.personChosseIndex = true
      this.$nextTick(() => {
        this.$refs.clientPersonChoose.is('add')
      })
    },
    // 点击联系人编辑
    personEditClick() {
      this.personChosseIndex = true
      this.$nextTick(() => {
        this.$refs.clientPersonChoose.is('edit', this.rowData.personData)
      })
    },
    // 关闭联系人弹窗
    closePersonDialog() {
      this.personChosseIndex = false
    },
    // 提交联系人
    personSubmit(data, type) {
      data['personType'] = 0
      if (type === 'add') {
        data['companyId'] = this.rowData.companyData.companyId
        addClientPerson(data).then((res) => {
          this.$notify({
            title: '成功',
            message: '增加联系人成功',
            type: 'success'
          })
          this.$refs.personTable.getTableData()
        })
      } else {
        editClientPerson(data).then((res) => {
          this.$notify({
            title: '成功',
            message: '更新联系人成功',
            type: 'success'
          })
          this.$refs.personTable.getTableData()
        })
      }
    },
    // 删除联系人
    personDeleteClick() {
      this.$confirm('此操作将永久删除该联系人, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteClientPerson({ personId: this.rowData.personData.personId }).then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.$refs.personTable.getTableData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 点击联系人行回调函数
    rowPersonClickChange(val) {
      this.rowData.personData = val
    },
    // 搜索公司
    searchCompanyClick() {
      this.searchCompanyData.currentPage = 1
      this.searchCompanyData.params['companyName'] = this.searchCompany.companyName
      this.$refs.companyTable.getTableData()
    },
    // 搜索联系人
    searchPersonClick() {
      this.searchPersonData.currentPage = 1
      this.searchPersonData.params['personName'] = this.searchPerson.personName
      this.$refs.personTable.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/pageTableTop.scss';
.client {
  height: 99%;
}
</style>
